<!DOCTYPE html>
<html lang="en">
<title>运营位管理</title>
<#import "/layout/layout.html" as body/>
<@body.page>
<style>
    .is-hide { display: none; }
</style>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>运营位管理</h2>
        <ol class="breadcrumb">
            <li>
                <a href="/">首页</a>
            </li>
            <li class="active">
                <strong>运营位管理</strong>
            </li>
        </ol>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeIn">
    <div class="tabs-container">
        <div class="ibox-title overflow">
            <h5 class="pull-left">添加/编辑运营位</h5>
        </div>
        <div class="ibox-content">
            <form id="addForm" class="form-horizontal">
                <input type="hidden" id="id" name="id" value="${(data.id)!}">
                <div class="form-group">
                    <label class="col-sm-2 control-label">类型</label>
                    <div class="col-sm-10" id="operating_type">
                        <div class="checkbox-inline i-checks"><label for="main_type1"> <input type="radio" id="main_type1" value="1" name="mainType"
                            <#if data?? && data.mainType?? && data.mainType == 1>checked</#if>
                            <#if data??>
                                <#else>checked
                            </#if>
                            > 图片</label></div>
                        <div class="checkbox-inline i-checks"><label for="main_type2"> <input type="radio" id="main_type2" value="2" name="mainType"
                            <#if data?? && data.mainType?? && data.mainType == 2>checked</#if>
                            > 视频</label></div>
                        <div class="checkbox-inline i-checks"><label for="main_type3"> <input type="radio" id="main_type3" value="3" name="mainType"
                            <#if data?? && data.mainType?? && data.mainType == 3>checked</#if>
                            > 文章</label></div>
                        <input type="hidden" id="operating_type_input" value="${(data.mainType)!}">
                    </div>
                </div>
                <div id="sub_type_show">
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" id="sub_type_lab">图片类型</label>
                        <div class="col-sm-10" id="sub_type">
                            <div class="checkbox-inline i-checks"><input type="radio" id="sub_type1" value="1" name="subType"
                                <#if data?? && data.mainType?? && data.mainType == 1 && data.subType?? && data.subType == 1>checked</#if>
                                >
                                <label for="sub_type1" id="sub_type_1"> 首页轮播图</label></div>
                            <div class="checkbox-inline i-checks"><input type="radio" id="sub_type2" value="2" name="subType"
                                <#if data?? && data.mainType?? && data.mainType == 1 && data.subType?? && data.subType == 2>checked</#if>
                                >
                                <label for="sub_type2" id="sub_type_2"> 檬店</label></div>
                            <div class="checkbox-inline i-checks"> <input type="radio" id="sub_type3" value="3" name="subType"
                                <#if data?? && data.mainType?? && data.mainType == 1 && data.subType?? && data.subType == 3>checked</#if>
                                >
                                <label for="sub_type3" id="sub_type_3">私教推荐活动</label></div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="sub_type_val" value="${(data.subType)!}">

                <div class="hr-line-dashed"></div>
                <div class="form-group"><label class="col-sm-2 control-label">标题</label>
                    <div class="col-sm-10"><input name="title" value="${(data.title)!}" class="form-control"></div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group"><label class="col-sm-2 control-label">副标题</label>
                    <div class="col-sm-10"><input name="subTitle" value="${(data.subTitle)!}" class="form-control"></div>
                </div>
                <!--文章摘要-->
                <div class="is-hide" id="is_article">
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-2 control-label">摘要</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" name="desc">${(data.desc)!}</textarea>
                            <!--<input name="desc" value="${(data.desc)!}" class="form-control">-->
                        </div>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group"><label class="col-sm-2 control-label">链接</label>
                    <div class="col-sm-10"><input type="url" name="link" value="${(data.link)!}" class="form-control"></div>
                </div>

                <div class="hr-line-dashed"></div>
                <!--作者 教练-->
                <div class="is-hide" id="is_coach_author">
                    <div class="form-group"><label class="col-sm-2 control-label" id="coach_author">教练</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="coach_author_input" value="${(data.coachId)!}">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                </div>

                <!--视频-->
                <div class="is-hide" id="is_video">
                    <div class="form-group"><label class="col-sm-2 control-label">视频时长</label>
                        <div class="col-sm-10"><input name="videoTime" class="form-control"></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-2 control-label">视频标签</label>
                        <div class="col-sm-10"><input name="videoAttr" class="form-control"></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-2 control-label">视频类别</label>
                        <div class="col-sm-10"><input name="videoType" class="form-control"></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                </div>
                <div id="up_load_img">
                    <div class="form-group" ><label class="col-sm-2 control-label" id="upload">轮播图</label>
                        <div class="col-sm-10">
                            <div id="head_img" class="dropzone">
                                <input type="hidden" id="imgUrl" name="imgUrl" value="${(data.imgUrl)!}">
                                <div class="dropzone-previews"></div>
                            </div>
                        </div>

                    </div>
                    <div class="hr-line-dashed"></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <button type="button" onclick="history.go(-1);" class="btn btn-default pull-left">取消</button>
                        <button type="button" id="save" class="btn btn-success pull-right">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<link rel="stylesheet" href="${baseUrl}css/plugins/magicsuggest/magicsuggest-min.css">
<script src="${baseUrl}js/plugins/magicsuggest/magicsuggest-min.js"></script>
<script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
<script type="text/javascript" src="${baseUrl}js/upload/webToOss.js"></script>
<script src="${baseUrl}js/plugins/dropzone/dropzone.js"></script>
<script>

    var myDropzone;
    var coachIdArr;
    $(document).ready(function () {

        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });



        function getParameter(param) {//getParameter("shopId");//获取参数
            var reg = new RegExp('[&,?]' + param + '=([^\\&]*)', 'i');
            var value = reg.exec(location.search);
            return value ? value[1] : '';
        }

        //编辑默认选中

        var xxID = $("#id").val();
        var xx = $("#operating_type_input").val();
        var main_type = xxID ? xx : getParameter("mainType");
        var mainType = Number(main_type);

        main_type_change(mainType);

        //主类型改变事件
        $("#operating_type input").on('ifClicked', function () {

            mainType = $(this).val();
            console.error("mainType " + $("#operating_type_input").val());
            main_type_change($(this).val());
        });

        function main_type_change(mainType) {

            console.info("mainType val --" + mainType);

            var $is_coach_author = $('#is_coach_author'); //作者 教练
            var $is_article = $('#is_article'); //文章
            var $is_video = $('#is_video'); //视频
            var $coach_author = $('#coach_author'); //作者 or 教练
            var $upload = $('#upload'); //上传 封面图
            var $img_show = $('#sub_type_show');//图片子类型选择
            var $text_show = $('#text_show');//文章子类型选择
//            $('[name="subType"]').iCheck('uncheck');

            if (mainType == 1) {
                mainType1();
            } else if (mainType == 2) {
                mainType2();
            } else if (mainType == 3) {
                mainType3();
            }
            $("#sub_type").trigger('ifChecked');
        }

        function mainType1() {
            if ( !$('#main_type1').prop('checked')) {
                $('#main_type1').iCheck('check');
            }
            $('#sub_type_lab').text('图片类型');
            $('#sub_type_1').text('首页轮播图');
            $('#sub_type_2').text('檬店');
            $('#sub_type_3').text('私教推荐活动');

            $('#sub_type_show').show();
            $('#is_article').hide();
            $('#is_coach_author').hide();
            $('#is_video').hide();
            $('#upload').text('轮播图');
        }
        function mainType2() {
            if ( !$('#main_type2').prop('checked')) {
                $('#main_type2').iCheck('check');
            }
            $('#sub_type_show').hide();
            $('#is_article').hide();
            $('#is_coach_author').show();
            $('#is_video').show();
            $('#coach_author').text('教练');
            $('#upload').text('视频封面图');
        }
        function mainType3() {
            if ( !$('#main_type3').prop('checked')) {
                $('#main_type3').iCheck('check');
            }
            $('#sub_type_lab').text('文章类型');
            $('#sub_type_1').text('普通文章');
            $('#sub_type_2').text('推荐教练');
            $('#sub_type_3').text('首页通知');

            $('#sub_type_show').show();
            $('#is_article').show();
            $('#is_coach_author').show();
            $('#is_video').hide();
            $('#coach_author').text('作者');
            $('#upload').text('文章封面图');
        }

        var text = $("#sub_type_val").val();
        var sub_type = xxID ? text : getParameter("subType");
        var subType = Number(sub_type);

        sub_type_change(subType);

        //子类型改变事件
        var $sub_type = $("#sub_type input");//子类型选中值
        $sub_type.on('ifClicked', function () {
            subType = $(this).val();
            sub_type_change($(this).val());
        });


        /**
         * 子类型改变
         *
         * @author blank 2017/8/11 下午3:52
         */
        function sub_type_change(subType) {
            if (mainType == 2) {
                return ;
            }
            console.info("subType val --" + subType);

            if (subType == 1) {
                subType1();
            } else if (subType == 2) {
                subType2();
            } else if (subType == 3) {
                subType3();
            }
        }

        function subType1(){
            if ( !$('#sub_type1').prop('checked')) {
                $('#sub_type1').iCheck('check');
            }
            $('#up_load_img').show();
            if (mainType ==3) {
                $('#is_coach_author').show();
            }
        }
        function subType2(){
            if ( !$('#sub_type2').prop('checked')) {
                $('#sub_type2').iCheck('check');
            }
            $('#up_load_img').show();
            if (mainType ==3) {
                $('#is_coach_author').show();
            }
        }
        function subType3(){
            if ( !$('#sub_type3').prop('checked')) {
                $('#sub_type3').iCheck('check');
            }
            if (mainType ==3 ) {
                $('#is_coach_author').hide();
                $('#up_load_img').hide();
            } else {
                $('#up_load_img').show();
            }
        }

//        $("#main_type1").trigger('ifChecked');
//        $sub_type.trigger('ifChecked');


        //处理教练/下拉/默认值
        coachIdArr = $('#coach_author_input').val();
        var coach_author_input = $('#coach_author_input').magicSuggest({
            resultAsString: true,
            placeholder: '请选择',
            required: true,
            allowFreeEntries: false,
            maxSelection: 1,
            maxSelectionRenderer: function (num) {
                return '已达到最大可选数量';
            },
            expandOnFocus: true,
            strictSuggest: true,
            data: ${coachList},
            displayField: 'nickName',
            valueField: 'id'
        });
        if (coachIdArr.length > 0) {
            coach_author_input.setValue([coachIdArr]);
        }
        $(coach_author_input).on('selectionchange', function () {
            console.log('DATA---->>' + this.getValue());
            coachIdArr = this.getValue();
        });

        //图
        Dropzone.autoDiscover = false;
        myDropzone = new Dropzone("#head_img", {
            url: "upload_pic",
            uploadMultiple: false,
            addRemoveLinks: true,
            dictDefaultMessage: "将文件拖到此处上传",
            dictFileTooBig: "文件过大",
            dictCancelUpload: "取消上传",
            dictRemoveFile: "移除文件",
            dictMaxFilesExceeded: "超过上传文件数量限制",
            maxFiles: 1,
            maxFilesize: 10.5,
            acceptedFiles: ".jpg,.jpeg,.png",
            method: 'post',
            filesizeBase: 1024,

            init: function () {
                var url = $("#imgUrl").val();
                if (!url || url.length <= 0) {
                    url = "";
                }
                this.emit("initimage", url);
                this.on("error", function (file, response, XMLHttpRequest) {
                    if (response === '超过上传文件数量限制') {
                        swal("图片上传出错!", '超过上传文件数量限制,即将清除多余图片,请确认数量后再试...', "error");
                    } else {
                        swal("图片上传异常!", "图片服务器出错,即将清除无效图片,请稍后重新上传...", "error");
                    }
                    window.setTimeout(function () {
                        $('#head_img .dz-image-preview.dz-error').remove()
                    }, 1000);
                });
                this.on("success", function (file, response, e) {
                    if (response.error) {
                        $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
                    } else {
                        $("#imgUrl").val(response.url);
                    }
                });
                this.on("sending", function (file, xhr, formData) {
                    formData.append("filesize", file.size);
                });
                this.on("removedfile", function (file) {
                    var responseJson = null;
                    if (file && file.xhr && file.xhr.responseText) {
                        responseJson = $.parseJSON(file.xhr.responseText);
                    }
                    if (responseJson) {
                        $("#imgUrl").val("");
                    } else if (file.name.length > 0) {
                        $("#imgUrl").val("");

                        console.log("文件 " + file.name + " 被移除");
                    }
                });
            }
        });

//        $("#operating_type input[type='radio']").change(function (_this) {
//            alert(this + _this);
//        });
    });

    /**
     * 保存
     *
     * @author blank 2017/7/13 下午4:28
     */
    $("#save").click(function () {
        debugger

        var param = $("#addForm").serialize();
        param += "&coachId=" + coachIdArr.toString();
        $("#save").attr('disabled', "true");

        $.post("save", param, function (data) {

            debugger;
            if (data && data.code === 1) {
                swal("保存成功!", "页面即将重新加载,请稍后...", "success");
                window.setTimeout(function () {
                    window.location.reload(true);
                }, 1000);
            } else {
                swal("保存失败!", data.msg, "error");
            }
        });

    });

</script>

</@body.page>
</html>